<template>
  <form action="" class="loginbar" @submit.prevent="handleSubmit">
        <div class="item">
            <div class="input"><label>邮箱：<input type="text" v-model="userInfo.mail" @input="validEmpty('mail','不能为空')"></label></div>
            <div class="error" :style="{visibility:error.mail?'visible':'hidden'}">{{error.mail}}</div>
        </div>
        <div class="item">
            <div class="input"><label>密码：<input type="password" v-model="userInfo.pwd" @input="validEmpty('pwd','不能为空')"></label></div>
            <div class="error" :style="{visibility:error.pwd?'visible':'hidden'}">{{error.pwd}}</div>
        </div>
        <div class="item">
            <input type="submit" :value="this.$store.state.loginUser.isLoading?'loginning':'登录'">
            <div class="error" :style="{visibility:error.server?'visible':'hidden'}">{{error.server}}</div>
        </div>
    </form>
</template>

<script>
export default {
    data(){
        return {
            userInfo:{
                mail:"",
                pwd:"",
            },
            error:{
                mail:"",
                pwd:"",
                server:""
            }
        }
    },
    methods:{
        validEmpty(field,msg){
            if(this.userInfo[field]){
                this.error[field] = ""
                return true
            }else{
                this.error[field] = msg
                return false
            }
        },
        async handleSubmit(){
            if(this.$store.state.loginUser.isLoading){return}

            var validata1 = this.validEmpty("mail","不能为空")
            var validata2 = this.validEmpty("pwd","不能为空")
            if(validata1 && validata2){
                var result = await this.$store.dispatch("loginUser/login",this.userInfo)
                if(result.err == 0){
                    this.$router.push({name:"Home"})
                }else{
                    this.error.server = result.msg
                }
            }
        }
    }
}
</script>

<style scoped>
    form{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    input{
        width: 200px;
        height: 30px;
        outline: none;
        border: none;
        border: 1px solid grey;
        box-sizing: border-box;
    }
    .item{
        position: relative;
        margin-bottom: 15px;
        padding-bottom: 20px;
        width: 300px;
        text-align: right;
    }
    .error{
        position: absolute;
        color: red;
        width: 200px;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
    }
    .item [type=submit]{
        border: none;
        background-color:blue;
        color: white;
        border: 1px solid aquamarine;
    }
</style>